<template>
  <div class="demo">
    <div class="demo-title">基本用法</div>
    <div class="demo-content">
      <List item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <List.Item>
            <List.Item.Meta :description="description">
              <template #title>
                <a :href="link">{{ item.title }}</a>
              </template>
              <template #avatar>
                <Avatar :src="avatar" />
              </template>
            </List.Item.Meta>
          </List.Item>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Avatar from '@sscd/avatar';
  import List from '@sscd/list';
  const description =
    'SSC Design, a design language for background applications, is refined by SSC UED Team';
  const link = 'https://www.antdv.com/';
  const avatar = 'https://joeschmoe.io/api/v1/random';
  interface DataItem {
    title: string;
  }
  const data: DataItem[] = [
    { title: 'Ant Design Title 1' },
    { title: 'Ant Design Title 2' },
    { title: 'Ant Design Title 3' },
    { title: 'Ant Design Title 4' },
  ];
</script>
